<template>
	<!-- 未使用优惠价 -->
	<view class="box">	
		<view class="lists" v-for="(item,index) in arrayList" >
			<view class="list" :key="index">
					  <view class="yuan">
			<p>￥ <span style="font-size: 25px; font-weight: bold;">{{item.money}}</span></p>	
					  	<view style="font-size: 14px;font-weight: bold;">
					  		满0元可用
					  	</view>
					  </view>
					  <!-- 通用样式-->
					  <view class="tong">				
							{{item.name}}
					  </view>
					  <view class="time">
					 {{item.useEndTimeStr}} {{item.useStartTimeStr}}
					  <view class="ke">
						<text>过期</text>
					  </view>
					  </view>
					  <view class="yong">
						<text>通用</text>
					  </view>
			</view>	  	
		</view>
	</view>
</template>

<script>
	import {coupons } from "../../network/pointer.js"
	export default{
		data(){				
			return{
				arrayList:[],
				
			}
		},
		async created() {
			let res = await coupons()
			console.log("222",res)
			this.arrayList = res.data.list
		
			}
		}
	
			
		
	
</script>

<style lang="scss">
	.box{
		width: 100vw;
		height: 100vh;
		background-color: #f5f5f5;
	}
	.lists{
		width: 90vw;
		height: 12vh;		
		margin-left: 20px;
		background-color: #fff;
		margin-bottom: 10px;
		
	}
	.list {
	  width: 100px;
	  height: 90px;
	  margin-left: 40px;
	  background:#ccc;	  
	  
	}
	
	
	.yuan{
		display: flex;
		flex-direction: column;
		text-align: center;
		color: #fff;
		padding: 10px;
		
		
	
	}
	.tong{		
		margin-top: -7vh;
		margin-left: 40vw;	
		width: 120px;
		padding: 0 5px;
		display: flex;		
	}		
	.tong span{
		width: 35px;
		display: block;
		border: 1px solid red;
		color: red;
		justify-content: center;
		font-size: 14px;
		display: flex;
		border-radius: 15px;
	}
	.userName{
		margin-left: 5px;
	}
	.time{
		width: 200px;
		font-size: 12px;
		color:#A9A9A9;
		margin-left: 110px;
		margin-top: 20px;
		
	}
	
	.ke{
	margin-left: 160px;	
	margin-top: -15px;
	width: 40px;
	text-align: center;
	border: 1px solid #ccc;
	color: #fff;
	background-color: #ccc;
	border-radius: 15px;
	}
	.yong{
		width: 50px;
		height: 20px;
		text-align: center;
		border: 1px solid #ccc;
		color: #fff;
		background-color: #ccc;
		border-radius: 15px;
		margin-left: 28vw;
		margin-top: -6.5vh;
	}
</style>